<template>
  <div class="headLsit">
    <div class="headLsit-header">
      <div class="search-inp">
        <div class="item">
          <span class="item-text" style="margin-left:0;">评价</span>
          <!-- <input
            type="text"
            v-model="star"
            placeholder="请选择评价"
          /> -->
          <el-select v-model="star" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      <!--  <div class="item">
          <span class="item-text">评论</span>
             <el-date-picker
              v-model="comment"
              type="date"
              placeholder="评论内容">
            </el-date-picker> -->
            <!-- <el-select v-model="comment" placeholder="请选择">
              <el-option
                v-for="item in commented"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select> -->
        <!--</div> -->
        <div class="item">
          <span class="item-text">日历</span>
          <el-date-picker v-model="indatetime" style="height:42px;" size="small" type="daterange" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </div>
        
      </div>
    </div>
    <div class="item" >
          <div class="search-btn" >
             <el-button type="primary" @click="searchClick">筛选</el-button>
            <!-- <span class="my-btn my-back-blue" >筛选</span> -->
             <el-button type="primary" @click="emptyClick">清空</el-button>
            <!-- <span class="my-btn" >清空</span> -->
          </div>
    </div>
    <div class="table">
      <el-table :data="arr" stripe border style="width: 100%">       
         <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
         <el-table-column prop="star" label="评价">
          <template slot-scope="scope">
            <span v-if="scope.row.star == 5">超赞</span>
            <span v-if="scope.row.star == 4">满意</span>
            <span v-if="scope.row.star == 3">一般</span>
            <span v-if="scope.row.star == 2">差</span>
            <span v-if="scope.row.star == 1">很差</span>
			<br />
			<span v-if="scope.row.star == 5">(5星)</span>
			<span v-if="scope.row.star == 4">(4星)</span>
			<span v-if="scope.row.star == 3">(3星)</span>
			<span v-if="scope.row.star == 2">(2星)</span>
			<span v-if="scope.row.star == 1">(1星)</span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="comment"
          label="评论内容"
        ></el-table-column> -->
        <el-table-column
          prop="name"
          label="评价人"
        ></el-table-column>
        <el-table-column
          prop="createTime"
          label="评价时间"
        ></el-table-column>
        <el-table-column
          prop="siteName"
          label="团长名称"
        ></el-table-column>
          <el-table-column
          label="团长logo">
          <template slot-scope="scope">
              <img class="ifLimit" :src="scope.row.shopLogo" alt="">
          </template>
        </el-table-column>
        <el-table-column label="操作" width="130">
          <template slot-scope="scope">
            <el-button  type="text">
               <span @click="Stop(scope.row) ">
                 <span v-if="scope.row.commentState==1">禁用</span>
                 <span v-if="scope.row.commentState==2">启用</span>
               </span>
             
             </el-button>
            <!-- <el-button @click="handleClick(scope.row)" type="text">禁用</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="mask" v-show="masknum">
            <div class="contenta">
                <p class="content-top">
                    <span>冻结</span>
                </p>
                <ul class="content-items">
                    <li class="item">
                        您确定冻结海悦天地F(自提点名称)的自提点吗？
                    </li>
                    <li class="item">
                       <span>请填写冻结原因</span>
                    </li>
                    <li class="item">
                       <el-input
                          type="textarea"
                          :rows="2"
                          placeholder="请填写冻结原因"
                          v-model="textarea">
                        </el-input>
                    </li>
                </ul>
                <div class="content-bottom">
                    <el-button type="primary" >冻结</el-button>
                    <el-button type="warning"  @click="cancelClick">取消</el-button>
                </div>
            </div>
      </div>
    </div>
    <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      star:'',
      comment:'',
      sitePhone:'',
      createTime:'',
      createTimeNew:'',
      state:'',
      merchantName:'',
      merchantNo:'',
      leader:'',
      masknum:false,
      currentPage:1,
      textarea: '',
      page: 1,
      total:0,
      pageSize: 5,
      options: [{
          value: '1',
          label: '超赞'
        }, {
          value: '2',
          label: '满意'
        }, {
          value: '3',
          label: '一般'
        }, {
          value: '4',
          label: '差'
        }, {
          value: '5',
          label: '很差'
        }],
        commented: [{
          value: '1',
          label: '有评论内容'
        },{
          value: '2',
          label: '无评论内容'
        }],
        indatetime:[],
      searchvalue1: "", //账号状态
      searchoptions1: [
        //合同状态
        { label: "启用", value: "1" },
        { label: "禁用", value: "0" },

      ],
      arr: [],
    };
  },
  mounted() {
    this.loadShopList();
  },
  methods: {
    // 查看
    handleClick(row){
      this.masknum=true
      // this.$router.push({
      //   path:'/index/seeMerchant/',
      //   query:{shopId:row.shopId}
      // })
  },
  //取消
  cancelClick(){
        this.masknum=false 
  },
    //编辑
    edit(row){
       this.$router.push({
        path:'/index/headlistedit',
       query:{siteId:row.siteId}
      })
    },
    // 添加商家按钮
    addMerchant() {
      this.$router.push("/index/addMerchant")
    },
    // 清空
    emptyClick() {
      this.star = ""
      this.comment = ""
      this.indatetime = ""
       this.loadShopList() 
    },
    //状态:0停用
       Stop(row){
       var com=2;
       if(row.commentState==2){
         com=1;
       }else{
          com=2;
       }
       console.log(com)
        const param={
            commentId:row.commentId,
            commentState:com
        }  
       if(com==2){
           	this.$confirm('您确定要禁用突突到家吗？禁用后，商家将不可在登录商户后台', "警告", {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type:'warning'
				}).then(()=>{
          this.axios({
              url:'/site/updateCommentState',
              method:'post',
              data:JSON.stringify(param),
          }).then(response => {
            if(response.data.code==""){
                    this.$message({ type: "success", message: "禁用成功!",});
                    this.loadShopList();
            }else{
                  this.$message({ type: "success", message: "禁用失败！！",});
            }
                });
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消更改',
					})
				})
       }else if(com==1){
          this.axios({
              url:'/site/updateCommentState',
              method:'post',
              data:JSON.stringify(param),
          }).then(response => {
            if(response.data.code==""){
                    this.$message({ type: "success", message: "启用成功!",});
                    this.loadShopList();
            }else{
                  this.$message({ type: "success", message: "启用失败！！",});
            }
                });
       }
			
       },
    //筛选
    searchClick() {
      this.currentPage = 1
       this.loadShopList(1)
    },
    //分页
     handleSizeChange(val) {
          this.pageSize = val;
          this.loadShopList();
        },
     handleCurrentChange(val) {//分页
          this.page = val;
          this.loadShopList();
        },
    //获取商户财务报表数据
    loadShopList(res) {
      if(res) {
        var param = {
          page: 1,
          pageSize: this.pageSize,
          comment:this.comment,
          createTime:this.createTime,
          createTimeNew:this.createTimeNew,
          star:this.star,
        };
      }else {
        var param = {
          page: this.page,
          pageSize: this.pageSize,
          comment:this.comment,
          createTime:this.createTime,
          createTimeNew:this.createTimeNew,
          star:this.star,
        };
      }
      

      this.axios({
        url: "/site/getAll",
        method: "post",
        data: JSON.stringify(param),
      }).then((res) => {
          this.arr = res.data.data.list;
          this.total = res.data.data.total;
      
      });
    },
  },
  watch: {},
};
</script>

<style scoped>
/* 申请事件中间的“至”的样式 */
.headLsit>>> .el-range-editor--small .el-range-separator {
  line-height: 32px;
}
/* 搜索 */
.ifLimit {
  width: 100px;
  height: auto;
}
.headLsit-header {
  margin: 20px 0;
}
.search-inp{
  display: flex;
}
.item-text{
  margin:0 10px;
}

/* 搜索按钮 */
.search-btn {
  width: 180px;
  margin-bottom: 10px;
 
}
.search-btn span {
  margin-left: 8px;
  margin-bottom: 6px;
}

/* 表格 */
.table-box {
  margin-top: 40px;
}
/* 遮罩层 */
.mask {
  width: 100vw;
  height: 100vh;
  /* color: #555; */
  background: rgba(51, 51, 51, 0.692);
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
}
.info{
    padding-left: 50px;
}
.mask .contenta {
  width: 580px;
  height: 400px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30PX;
}

.mask .content-top {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.mask .content-top img {
  width: 25px;
}

.content-items {
  margin: 40px 0 0 15px;
}

.content-items .item {
  margin: 12px 10px;
  display: flex;
  align-items: center;
}

.content-items .item span:first-child {
  display: inline-block;
  width: 150px;
}
.content-bottom{
  margin: 80px 0 0 180px;

}
</style>